<template>
    <page-view class="order-detail-page">
        <page-header title="订单评论" :show-back="true"></page-header>
        <div class="content-box" v-if="orderDetail">
            <h4>订单编号：{{orderDetail.oid}}</h4>
            <div class="foods-item" v-for="(item,index) in orderDetail.items" :key="index">
                <div class="img-box">
                    <img v-lazy="baseURL+item.food.img" alt="">
                </div>
                <div class="center">
                    <p>{{item.food.fname}}</p>
                    <p>价格：{{item.food.salecount}}</p>
                    <p>月售：{{item.food.price}}</p>
                </div>
                <div class="right">
                    <button @click="showComBox(item.food.fid)">评价</button>
                </div>
            </div>
        </div>
        <transition enter-active-class="animate__animated animate__bounceIn"
                    leave-active-class="animate__animated animate__bounceOut">
            <div class="comments-box" v-if="comBoxIsShow">
                <div class="text-box">
                    <textarea placeholder="来写个评论吧......" v-model="cont"></textarea>
                </div>
                <div class="btn">
                    <button class="published" @click="published">发表</button>
                    <button class="cancel" @click="hideComBox">取消</button>
                </div>
            </div>
        </transition>
    </page-view>
</template>
<script>
import {mapState} from "vuex";
    export default {
        name: "OrderDetail",
        data() {
            return {
                orderDetail: null,
                comBoxIsShow:false,
                cont:"",
                courrentFid:""
            }
        },
        created() {
            this.getOrderDetailByOid();
        },
        computed:{
            ...mapState(["userInfo"])
        },
        methods: {
            async getOrderDetailByOid() {
                const loading = this.$msg.loading({
                    title: "正在加载中",
                    duration: -1,
                    hasMask: true,
                    position: "center"
                });
                try {
                    let result = await this.$api.order.getOrderDetailByOid(this.$route.query.oid);
                    this.orderDetail = result.data;
                } catch (error) {
                    console.log(error);
                } finally {
                    loading.close();
                }
            },
            showComBox(fid){
                this.courrentFid = fid;
                this.comBoxIsShow = true;
            },
            hideComBox(){
                this.comBoxIsShow = false;
                this.cont = "";
            },
            async published(){
                try {
                    if(this.cont){
                        let result = await this.$api.comments.publishedComment(this.courrentFid,this.orderDetail.oid,this.userInfo.sno,this.cont);
                        this.$msg.info(result.data);
                        this.hideComBox();
                    } else {
                        this.$msg.info("小主还没有写评论呢......");
                    }
                } catch (error) {
                    console.log(error);
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .order-detail-page {
        @include flexbox(column);

        .content-box {
            flex: 1;
            overflow: auto;

            .foods-item{
                @include flexbox();
                height: 80px;
                padding: 5px 5px;
                box-sizing: border-box;
                border-bottom: 1px solid #cccccc;
                .img-box{
                    width: 110px;
                    img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .center{
                    flex: 1;
                    margin-left: 5px;
                    font-size: 12px;
                    @include flexbox(column,space-between);
                    >p:nth-child(1){
                        font-size: 16px;
                        font-weight: bold;
                    }
                    >p:nth-child(2){
                        color: red;
                    }
                }
                .right{
                    width: 70px;
                    @include flexbox(column,center,center);
                    button{
                        width: 50px;
                        height: 30px;
                        border: 1px solid #cccccc;
                        background-color: #fff;
                        outline: none;
                    }
                }
            }
        }
        .comments-box{
            position: fixed;
            background-color: #fff;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            padding: 5px;
            box-sizing: border-box;
            z-index: 20;
            .text-box{
                width: 100%;
                height: 150px;
                box-sizing: border-box;
                border: 1px solid gray;
                textarea{
                    width: 100%;
                    height: 100%;
                    border: none;
                    box-sizing: border-box;
                    padding: 5px;
                    outline: none;
                    font-size: 16px;
                    resize: none;
                }
            }
            .btn{
                @include flexbox(row,space-between,center);
                margin-top: 10px;
                .published{
                    width: 100px;
                    height: 30px;
                    border: 1px solid currentColor;
                    background-color:#fff;
                    color: $primaryColor;
                    outline: none;
                }
                .cancel{
                    @extend .published;
                    color: #666666;
                }
            }
        }
    }
</style>
